<template>
    <div class="title"><h1>人才培养方案</h1></div>
    <div class="option">
        <span style="margin-left: 200px">院系名称：</span>
        <el-select
            v-model="value1"
            :empty-values="[null, undefined]"
            :value-on-clear="null"
            placeholder="Select"
            style="width: 240px"
            @change="selectionChange1"
        >
            <el-option
                v-for="item in options1"
                :key="item.value1"
                :label="item.label1"
                :value="item.value1"
            />
        </el-select>
        <span style="margin-left: 20px">专业名称：</span>
        <el-select
            v-model="value2"
            :empty-values="[null, undefined]"
            :value-on-clear="null"
            placeholder="Select"
            style="width: 240px"
            @change="selectionChange2"
        >
            <el-option
                v-for="item in options2"
                :key="item.value2"
                :label="item.label2"
                :value="item.value2"
            />
        </el-select>
        <el-button style="margin-left: 20px" type="primary" @click="handleSearch">查询</el-button>
        
        <el-button style="margin-left: 20px" type="primary" @click="refreshPage">返回</el-button>
    </div>
    
    <div class="list" style="margin-top: 20px">
        <span>专业培养方案：</span>
        <template v-if="isListLoad">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="majorCode" label="专业代码" width="180"/>
                <el-table-column prop="majorName" label="专业名称"/>
                <el-table-column prop="teachingPlan" label="培养方案" width="300"/>
                <el-table-column prop="departmentName" label="所属院系"/>
                <el-table-column prop="" label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="handleBrowse(scope.row.majorCode)">
                            查看培养方案
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
    </div>
    <VuePdfEmbed v-if="isPDFLoad" annotation-layer text-layer
                 :source="pdfSource" @rendering-failed="handleLoadFail"/>
</template>

<script setup lang="ts">

import VuePdfEmbed from 'vue-pdf-embed'
// essential styles
import 'vue-pdf-embed/dist/style/index.css'
// optional styles
import 'vue-pdf-embed/dist/style/annotationLayer.css'
import 'vue-pdf-embed/dist/style/textLayer.css'
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {getTeacherTalentPlan, searchTeacherTalentPlan} from "@/service/teacher/teacher.service";


const isPDFLoad = ref(false)
const value1 = ref('')
const value2 = ref('')
const options1 = ref([
    {
        value1: '',
        label1: '全部',
    }])
const options2 = ref([
    {
        value2: '',
        label2: '全部',
    }])

const selectDepartment = ref('')
const selectMajor = ref('')
const isListLoad = ref(false)
const tableData = ref([])
var pdfSource: string

onMounted(async () => {
    getTeacherTalentPlan(selectDepartment.value, selectMajor.value, (data: any) => {
        // 系部信息
        let departmentList = data.departmentDto.departmentList;
        for (const department of departmentList) {
            options1.value.push({
                value1: department.name,
                label1: `[${department.departmentId}]${department.name}`,
            })
            
            //未做选择院系时对专业的筛选处理
            let majorList = data.majorDto.majorList;
            // 专业信息
            options2.value = []
            for (const major of majorList) {
                options2.value.push({
                    value2: major.majorId,
                    label2: `[${major.majorId}]${major.name}`,
                })
            }
            
        }
        // 当前所有专业列表
        let teacherTalentPlanList = data.teacherTalentPlanList;
        console.log(teacherTalentPlanList)
        for (const teacherTalentPlan of teacherTalentPlanList) {
            
            tableData.value.push(teacherTalentPlan)
        }
        
    })
    isListLoad.value = true
})

function handleLoadFail() {
    ElMessage({
        message: "操作有误",
        type: "error",
        duration: 2000
    });
}

function refreshPage() {
    location.reload();
    
}

/**
 * 选择院系
 * @param val
 */
function selectionChange1(val: any) {
    value1.value = val
    selectDepartment.value = val
    value2.value = ''
    selectMajor.value = ''
    handleSearch2()
}

/**
 * 选择专业
 * @param val
 */
function selectionChange2(val: any) {
    value2.value = val
    selectMajor.value = val
    value1.value = ''
    selectDepartment.value = ''
    handleSearch()
}

/**
 * 根据院系/专业名称查询课程标准
 */
function handleSearch() {
    isListLoad.value = false
    isPDFLoad.value = false
    tableData.value = []
    
    getTeacherTalentPlan(null, null, (data: any) => {
        // 系部信息
        let departmentList = data.departmentDto.departmentList;
        let majorList = data.majorDto.majorList;
        for (const major of majorList) {
            if (major.majorId == selectMajor.value) {
                for (const department of departmentList) {
                    if (department.departmentId == major.departmentId) {
                        value1.value = department.name
                    }
                }
                for (const teacherTalentPlan of data.teacherTalentPlanList) {
                    if (teacherTalentPlan.majorCode == major.majorId) {
                        tableData.value.push(teacherTalentPlan)
                    }
                }
            }
        }
        isListLoad.value = true
    })
}

function handleBrowse(majorCode: any) {
    isPDFLoad.value = false
    console.log(majorCode)
    pdfSource = searchTeacherTalentPlan(majorCode)
    isPDFLoad.value = true
}

function handleSearch2() {
    isListLoad.value = false
    isPDFLoad.value = false
    tableData.value = []
    options2.value = []
    
    getTeacherTalentPlan(null, null, (data: any) => {
        // 系部信息
        let departmentList = data.departmentDto.departmentList;
        let majorList = data.majorDto.majorList;
        if (selectDepartment.value == "") {
            for (const teacherTalentPlan of data.teacherTalentPlanList) {
                console.log(teacherTalentPlan)
                tableData.value.push(teacherTalentPlan)
            }
        }
        for (const department of departmentList) {
            if (selectDepartment.value == "") {
                for (const major of majorList) {
                    options2.value.push({
                        value2: major.majorId,
                        label2: `[${major.majorId}]${major.name}`,
                    })
                }
            } else if (department.name == selectDepartment.value) {
                let departmentId = department.departmentId
                for (const major of majorList) {
                    if (major.departmentId == departmentId) {
                        options2.value.push({
                            value2: major.majorId,
                            label2: `[${major.majorId}]${major.name}`,
                        })
                        for (const teacherTalentPlan of data.teacherTalentPlanList) {
                            if (teacherTalentPlan.majorCode == major.majorId) {
                                tableData.value.push(teacherTalentPlan)
                            }
                            
                        }
                    }
                }
            }
        }
        isListLoad.value = true
    })
}


</script>


<style scoped>
.title {
    font-size: 20px;
    margin-bottom: 10px;
}

.option {
    margin-bottom: 20px;
}
</style>